{% stylesheet %}
.block_slides {
  width: 100%;
  max-width: var(--general_layout_width);
  margin: 0 auto;
}

.block_slides .slides {
  max-width: 1200px;
  text-align: center;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.block_slides .slide-item-content {
  padding: 80px;
}

.slides-fill .slide-item-content {
  padding: 0;
}

.slides-fill {
  width: 100%;
  max-width: 100%;
}

.slides-fill .slide-item-content {
  max-width: 1200px !important;
  box-sizing: border-box;
  left: 50%;
  transform: translateX(-50%);
}

.slides-fill .swiper-small {
  max-width: 1200px !important;
  box-sizing: border-box;
  left: 50%;
  transform: translateX(-50%);
}

.block_slides .slide-item {
  display: block;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  position: relative;
}

.block_slides .slide-item-big {
  height: 800px;
  width: 100%;
  object-fit: cover;
}

.block_slides .slide-item-center {
  height: 600px;
  width: 100%;
  object-fit: cover;
}

.block_slides .slide-item-samll {
  height: 420px;
  width: 100%;
  object-fit: cover;
}

.block_slides .slide-item-auto {
  height: auto;
  width: 100%;
  object-fit: cover;
}

.block_slides .slide-item-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.block_slides .slide-item-content {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 110;
  box-sizing: border-box;
}

.block_slides .slide-item-content-left {
  align-items: flex-start;
}

.block_slides .slide-item-content-left .slide-item-des {
  text-align: left;
  max-width: 385px;
}

.block_slides .slide-item-content-right {
  align-items: flex-end;
}

.block_slides .slide-item-content-right .slide-item-des {
  text-align: right;
  max-width: 385px;
}

.block_slides .slide-item-content-center {
  align-items: center;
}

.block_slides .slide-item-content-center .slide-item-des {
  max-width: 800px;
  text-align: center;
}

.block_slides .slide-item-content-right .slide-item .slide-item-des,
.block_slides .slide-item-content-left .slide-item .slide-item-des {
  max-width: 385px;
}

.block_slides .slide-item .slide-item-title {
  font-size: 56px;
  font-weight: 300;
  text-align: left;
  color: #ffffff;
  font-size: var(--title_font_size);
  color: var(--title_color);
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  font-weight: var(--title_font_weigth);
  letter-spacing: var(--title_letter_spacing);
}

.block_slides .slide-item .slide-item-line {
  width: 50px;
  margin-top: 30px;
  border: 1px solid #ffffff;
}

.block_slides .slide-item .slide-item-des {
  margin-top: 30px;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
}

.block_slides .swiper-small {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 80px;
  z-index: 100;
  box-sizing: border-box;
}

.block_slides .swiper-small .swiper-small-warp {
  overflow: hidden;
}

.block_slides .swiper-small .swiper-small-container {
  display: flex;
  align-items: center;
  transition: all 0.25s;
}

.block_slides .swiper-small .swiper-small-hanle {
  display: flex;
  align-items: center;
  float: left;
  padding: 0 10px;
}

.block_slides .swiper-small .swiper-small-item {
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 50%;
  margin: 0 10px;
}

.block_slides .swiper-small .swiper-small-item-active {
  background-color: #ffffff;
}

.block_slides .carousel-panel {
  width: 100%;
  overflow: hidden;
}

.block_slides .carousel-panel-container {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.block_slides .carousel-panel-container .carousel-panel-container-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.block_slides .block-image-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .block_slides .slide-item .slide-item-title {
    font-size: calc(var(--title_font_size) * var(--wap_title_scale));
  }
  .block_slides .slide-item .slide-item-des {
    font-size: 14px;
  }
  .block_slides .slide-item-big {
    height: 600px;
  }
  .block_slides .slide-item-center {
    height: 400px;
  }
  .block_slides .slide-item-samll {
    height: 320px;
  }
  .block_slides .slide-item-content {
    padding: 0 15px;
  }
}

@media screen and (max-width: 1200px) {
  .block_slides .slide-item-content {
    padding: 0 30px;
  }
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item .slide-item-des {
    font-size: 14px;
  }
  .block_slides .block-image-mobile {
    display: block;
  }
  .block_slides .block-image-pc {
    display: none;
  }
  .block_slides .slide-item-big {
    height: 100vh;
  }
  .block_slides .slide-item-center {
    height: 70vh;
  }
  .block_slides .slide-item-samll {
    height: 50vh;
  }
}

.block_slides .swiper-pagination-bullet {
  opacity: 1;
  background-color: #fff;
}

.block_slides .swiper-pagination-bullet-active {
  background: #333333;
}

.block_slides .swiper-pagination span {
  width: 10px;
  height: 10px;
  border: 2px solid #1d1f21;
  border-radius: 50%;
  background: none;
  margin: 0 3px;
  opacity: 1;
  box-sizing: border-box;
}

.block_slides .swiper-pagination span.swiper-pagination-bullet-active {
  background: #1d1f21;
}

{% endstylesheet %}


<div class="block_slides slides {% if section.settings.is_width_fill %}slides-fill{% endif %}">
    <div class="carousel-panel-container swiper-carousel-{{ block_id | default : section.block_id }}" id="swiper-carousel-{{ block_id | default : section.block_id }}">
        <ul class="swiper-wrapper">
            {% if section.blocks | size %}
            {% for block in section.blocks %}
            <li class="swiper-slide">
              
              {% capture cropType %}
              {%- unless section.settings.height  == 'auto' -%}
              data-crop-type="height"
              {%- endunless -%}
              {% endcapture %}
							{%- if block.button_text == "" -%}
								<a href="{{block.link | setUrlDataFrom:data_from }}" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index:200"></a>
							{%- endif -%}
                <div class="slide-item carousel-panel-container-item">
									<div>
										{% if block.pc_image.src != "" %}
											<img data-src="{{ block.pc_image.src }}" {{cropType}} src="{{ 'banner_loading.png' | public_asset_abs_url }}"  alt="{{ block.pc_image.alt }}" class="slide-item-img slide-item-{{ section.settings.height }} block-image-pc" />
										{% else %}
											<img  {{cropType}} src="{{ 'banner@2x.png' | public_asset_abs_url }}"  alt="" class="slide-item-img slide-item-{{ section.settings.height }} block-image-pc" />
										{% endif %}
										{% if block.mobile-image.src != "" or block.pc_image.src != "" %}
											<img data-src="{{ block.mobile-image.src | default:block.pc_image.src  }}" {{cropType}} src="{{ 'banner_loading.png' | public_asset_abs_url }}" alt="{{ block.mobile-image.alt }}" class="slide-item-img slide-item-{{ section.settings.height }} block-image-mobile" />
										{% else %}
											<img  {{cropType}} src="{{ 'banner@2x.png' | public_asset_abs_url }}"  alt="" class="slide-item-img slide-item-{{ section.settings.height }} block-image-mobile" />
										{% endif %}
                    <div class="slide-item-mask" style="background-color:{{ block.mask_color }};opacity: {{ block.mask | divided_by : 100  }};"></div>
                    <div class="slide-item-{{ block_id | default : section.block_id }} slide-item-content slide-item-content-{{ block.position }} {% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
                        <div class="slide-item-title" style="color:{{ block.title_color }}">{{ block.title }}</div>
                       {% if block.subtitle != "" %}
                        <div class="slide-item-des" style="color:{{ block.title_color }}">{{ block.subtitle }}</div>
                        {% endif %}
                        {% if block.button_text %}
												<a href="{{block.link | setUrlDataFrom:data_from }}">
                        <span class="slide-item-btn main_btn" style="background-color:{{ block.button_background_color }};color:{{ block.button_font_color  }}">{{ block.button_text }}</span>
												</a>
                        {% endif %}
                    </div>
									</div>
                </div>
            </li>
            {% endfor %}
            {% else %}
             <li class="swiper-slide">
                <div class="slide-item carousel-panel-container-item">
                    <img src="{{ 'banner@2x.png' | public_asset_abs_url }}"  class="slide-item-img slide-item-{{ section.settings.height }}" />
                </div>
            </li>
            {% endif %}
        </ul>

        <div class="swiper-pagination swiper-carousel-pagination-{{ block_id | default : section.block_id }}"></div>
    </div>
</div>
<div class="card-script">
<script type="text/javascript">
$(function() {
  var sildesSwiper = new Swiper('.swiper-carousel-{{ block_id | default : section.block_id }}', {
      {% if section.blocks.size >1  %}loop: true,{% endif %}
      watchOverflow: true,
      autoplay:{% if section.settings.is_play and section.blocks.size >1  %}{delay: Number('{{section.settings.duration}}') * 1000}{% else %}false{% endif %},
      {% if section.blocks.size >1  %}
      pagination: {
          el: '.swiper-carousel-pagination-{{ block_id | default : section.block_id }}',
          clickable:true
      }
      {% endif %}
  })
	var block = {{section.blocks|json}};
  if(block.length){
    moi.addEvent('lazyImg', function(event) {
        if (event.params && block.findIndex(item => {
          return item.pc_image.src == event.params || item['mobile-image'].src == event.params
        }) > -1) {
          sildesSwiper.updateAutoHeight()
        }
    })
  }
})
</script>
</div>


{% schema %}
{
	"tag": "",
	"class": "block_slides",
	"is_global": false,
	"name": {
		"zh_CN": "轮播图",
		"en_US": "Slideshow"
	},
	"max_blocks": 10,
	"blocks": [
		{
			"name": {
				"zh_CN": "轮播图片",
				"en_US": "Slide image"
			},
			"type": "slide-item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "pc端图片",
						"en_US": "Image on PC"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420",
						"en_US": "Suggested size: large -1920*800px, medium -1920*600, small -1920*420"
					},
					"id": "pc_image"
				},
				{
					"type": "card_image",
					"label": {
						"zh_CN": "移动端图片",
						"en_US": "Mobile image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议1242*2000px",
						"en_US": "Size suggested 1242*2000px"
					},
					"id": "mobile-image"
				},
				{
					"type": "card_select",
					"label": {
						"zh_CN": "标题按钮位置",
						"en_US": "Title button location"
					},
					"id": "position",
					"option": [
						{
							"label": {
								"zh_CN": "居左",
								"en_US": "To the left"
							},
							"value": "left"
						},
						{
							"label": {
								"zh_CN": "居中",
								"en_US": "In the center"
							},
							"value": "center"
						},
						{
							"label": {
								"zh_CN": "居右",
								"en_US": "To the right"
							},
							"value": "right"
						}
					],
					"default": "center"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "标题颜色",
						"en_US": "Header color"
					},
					"default": "#fff",
					"id": "title_color"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": "Image banner"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "简短描述",
						"en_US": "Short description"
					},
					"id": "subtitle",
					"default": "Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store."
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接",
						"en_US": "Jump links"
					},
					"id": "link",
					"default": {
						"type": "",
						"title": "",
						"url": ""
					}
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "按钮名称",
						"en_US": "Button name"
					},
					"id": "button_text",
					"default": "BUTTON LABEL"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "按钮背景",
						"en_US": "Button background"
					},
					"id": "button_background_color",
					"default": "#1D1F21"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "按钮文字颜色",
						"en_US": "Button text color"
					},
					"id": "button_font_color",
					"default": "#fff"
				},
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "蒙层透明度",
						"en_US": "Mask transparency"
					},
					"id": "mask",
					"max": "100",
					"min": "0",
					"default": "0"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "蒙层颜色",
						"en_US": "Mask color"
					},
					"id": "mask_color",
					"default": "#000"
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "自动轮播",
				"en_US": "Automatic slide"
			},
			"id": "is_play",
			"default": true
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "轮播时间(s)",
				"en_US": "Slide time (s)"
			},
			"default": "3",
			"max": 5,
			"min": 1,
			"id": "duration"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "图片高度",
				"en_US": "Image height"
			},
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大",
						"en_US": "Big"
					},
					"value": "big"
				},
				{
					"label": {
						"zh_CN": "中",
						"en_US": "Middle"
					},
					"value": "center"
				},
				{
					"label": {
						"zh_CN": "小",
						"en_US": "Small"
					},
					"value": "samll"
				},
				{
					"label": {
						"zh_CN": "自适应",
						"en_US": "Adaptive"
					},
					"value": "auto"
				}
			],
			"default": "samll"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_width_fill",
			"default": true
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
	],
	"default": {
		"settings": {
			"is_play": true,
			"duration": "3",
			"height": "samll",
			"is_width_fill": true
		},
		"blocks": [
			{
				"pc_image": {
					"src": "",
					"alt": ""
				},
				"mobile-image": {
					"src": "",
					"alt": ""
				},
				"position": "center",
				"title_color": "#fff",
				"title": "Image banner",
				"subtitle": "Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"button_text": "BUTTON LABEL",
				"button_background_color": "#1D1F21",
				"button_font_color": "#fff",
				"mask": "0",
				"mask_color": "#000",
				"block_type": "slide-item"
			}
		]
	},
	"icon": "icon-lunbotu"
}
{% endschema %}